<template>
  <div class="app-container">
    <CommonContainer title="用户信息">
      <el-descriptions>
        <el-descriptions-item label="用户姓名">{{ userInfo.nickName }}</el-descriptions-item>
        <el-descriptions-item label="归属组织">{{ userInfo.dept.allDeptName }}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ userInfo.phonenumber }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
        <el-descriptions-item label="用户账号">{{ userInfo.userName }}</el-descriptions-item>
        <el-descriptions-item label="用户性别">
          <dict-tag
              :options="dict.type.sys_user_sex"
              :value="userInfo.sex"/>
        </el-descriptions-item>
        <el-descriptions-item label="角色">{{ roles }}</el-descriptions-item>
        <el-descriptions-item label="岗位">{{ postNames }}</el-descriptions-item>
        <el-descriptions-item label="NC员工id">{{ userInfo.ncId|filterNull }}</el-descriptions-item>
        <el-descriptions-item label="NC员工编码">{{ userInfo.ncCode|filterNull }}</el-descriptions-item>
        <el-descriptions-item label="OA员工编码">{{ userInfo.oaCode|filterNull }}</el-descriptions-item>
        <el-descriptions-item label="nc供应商id">{{ userInfo.ncSupplierId|filterNull }}</el-descriptions-item>
        <el-descriptions-item label="nc供应商code">{{ userInfo.ncSupplierCode|filterNull }}</el-descriptions-item>
        <el-descriptions-item label="用户状态">
          <dict-tag :options="dict.type.sys_normal_disable" :value="userInfo.status"/>
        </el-descriptions-item>
        <el-descriptions-item label="业务类型">
          <dict-tag :options="dict.type.user_business_type" :value="userInfo.businessType"/>
        </el-descriptions-item>
        <el-descriptions-item label="岗位状态">{{ userInfo.workingCondition == 1 ? '在岗' : '离岗' }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ userInfo.remark }}</el-descriptions-item>
      </el-descriptions>
    </CommonContainer>

    <CommonContainer title="账户信息">
      <el-table border :data="userInfo.accounts" style="width: 100%">
        <el-table-column type="index" key="index" width="50" align="center" label="序号"/>

        <el-table-column prop="accountName" key="accountName" align="center" label="开户名称"/>

        <el-table-column prop="bankName" key="bankName" align="center" label="开户银行"/>

        <el-table-column prop="accountNumber" key="accountNumber" align="center" label="银行账户"/>

        <el-table-column prop="accountStatus" key="accountStatus" align="center" label="是否为生效账号">
          <template #default="{row}">
            <span>{{
                0 == row.accountStatus ? '是' : 1 == row.accountStatus ? '否' : '--'
              }}</span>
          </template>
        </el-table-column>

      </el-table>
    </CommonContainer>
    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import {getUser, userBankAccount} from "@/api/system/user";
import {filterNull} from "@/utils/filters";

export default {
  components: {},
  dicts: ['sys_normal_disable', 'sys_user_sex', 'user_business_type'],
  props: {},
  data() {
    return {
      postIds: [],
      posts: [],
      userInfo: {
        dept: {}
      }
    }
  },
  computed: {
    roles() {
      const userRoles = this.userInfo.roles;
      let roles = userRoles?.map(item => {
        return item.roleName
      }) || []
      let roleNames = roles?.join(',') || '';
      return roleNames
    },
    postNames() {
      const postIds = this.postIds;
      const posts = this.posts;
      let newList = posts.filter((item) =>
          postIds.includes(item.postId)
      );
      let postNames = newList?.map(item => {
        return item.postName
      }) || []
      let postNamesStr = postNames?.join(',') || '';
      return postNamesStr
    }
  },
  methods: {
    filterNull,
    getUser() {
      getUser(this.$route.query.userId).then(response => {
        this.postIds = response.data.postIds;
        this.posts = response.data.posts;
        this.userInfo = response.data.user;
        this.handleBankList()
      });
    },

    async handleBankList() {
      try {
        let res = await userBankAccount({userId: this.$route.query.userId})
        this.userInfo.accounts = res.data || []
      } catch (e) {
        console.log(e)
      }
    },

    back() {
      this.$router.back()
      this.$store.dispatch('tagsView/delView', this.$route)
    },
  },
  mounted() {
    this.getUser()
  },

}
</script>

<style lang="scss" scoped>
</style>
